import React, {useEffect} from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  Dimensions,
  FlatList,
} from 'react-native';
import Api from '../../../apis/Api.ts';
import Swiper from 'react-native-swiper';
import StoryItem from '../../../components/story-item/index.tsx';
import usePageData from '../../../hook/usePageData.ts';

const {width} = Dimensions.get('window');

export default function MoreScreen({route, navigation}: any) {
  const param = {
    pageSize: 10,
    sort: [
      {
        key: route.params.type,
        value: 'desc',
      },
    ],
  };
  const {page, loading, loadComplete, nextPage} = usePageData(Api.story.storyPage, param);



  return (
    <View style={{flex: 1, padding: 10, backgroundColor: '#fff8f5'}}>
      <FlatList
        data={page.list}
        keyExtractor={({item, index}) => index}
        renderItem={({item, index}) => <StoryItem item={item} index={index + 1}></StoryItem>}
        numColumns={2}
        onEndReached={nextPage}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  stretch: {
    width: 480,
    resizeMode: 'stretch',
  },
  container: {
    flex: 1,
  },
  itemMarginRight: {
    marginLeft: 6,
  },
  itemMarginLeft: {
    marginRight: 6,
  },
});
